<template>
  <div class="ComprehensiveMore">
    <div class="moreContent">
      <div class="Cheader">
        <span class="title">&nbsp;综合信息</span>
        <router-link to="/monitor/console"> <span style="float: right; color:#25B6C7 ">&nbsp;<i class="el-icon-arrow-left"></i>返回</span></router-link>
      </div>
      <div class="moreList">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div class="TotalRunningTime">
                <div class="timeTop">
                  <div class="timeTopLeft">
                    <img :src="shichang" style="vertical-align: middle"/>
                  </div>
                  <div class="timeTopRight">
                    <span class="rTitle"> 总运行时长(h)</span><br/><br/>
                    <span class="tNum">{{this.totalTime}}</span>
                  </div>

                </div>
                <div class="tableOne">
                  <el-table
                    :data="queryTimeDatas"
                    border
                    stripe border fit highlight-current-row
                    style="width: 100%;height:34.6vw; "
                    :header-cell-style="{background:'#F0F2F7',height: '20px',padding:'5px 0px'}"
                    height="34.6vw"
                  >
                    <el-table-column
                      v-for="(column, index) in cols"
                      :prop="column.prop"
                      :label="column.label"
                      :key="index"
                      :width="column.width"
                      :sortable="column.sortable"
                    >
                    </el-table-column>
                  </el-table>
                </div>
              </div>
          </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div class="TotalRunningTime">
                <div class="timeTop">
                  <div class="timeTopLeft">
                    <img :src="zongchanliang" style="vertical-align: middle"/>
                  </div>
                  <div class="timeTopRight">
                    <span class="rTitle"> 总产量(T)</span><br/><br/>
                    <span class="tNum">{{this.totalchan}}</span>
                  </div>

                </div>
                <div class="tableOne">
                  <el-table
                    :data="queryTimeDatas"
                    border
                    stripe border fit highlight-current-row
                    style="width: 100%;height:34.6vw; "
                    :header-cell-style="{background:'#F0F2F7',height: '20px',padding:'5px 0px'}"
                    height="34.6vw"
                  >
                    <el-table-column
                      v-for="(column, index) in colT"
                      :prop="column.prop"
                      :label="column.label"
                      :key="index"
                      :width="column.width"
                      :sortable="column.sortable"
                    >
                    </el-table-column>
                  </el-table>
                </div>
              </div>
          </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div class="TotalRunningTime">
                <div class="timeTop">
                  <div class="timeTopLeft">
                    <img :src="zongqiliang" style="vertical-align: middle"/>
                  </div>
                  <div class="timeTopRight">
                    <span class="rTitle"> 总起重量(T)</span><br/><br/>
                    <span class="tNum">{{this.totalQIz}}</span>
                  </div>

                </div>
                <div class="tableOne">
                  <el-table
                    :data="queryTimeDatas"
                    border
                    stripe border fit highlight-current-row
                    style="width: 100%;height:34.6vw; "
                    :header-cell-style="{background:'#F0F2F7',height: '20px',padding:'5px 0px'}"
                    height="34.6vw"
                  >
                    <el-table-column
                      v-for="(column, index) in colT1"
                      :prop="column.prop"
                      :label="column.label"
                      :key="index"
                      :width="column.width"
                      :sortable="column.sortable"
                    >
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div class="TotalRunningTime">
                <div class="timeTop">
                  <div class="timeTopLeft">
                    <img :src="haodianliang" style="vertical-align: middle"/>
                  </div>
                  <div class="timeTopRight">
                    <span class="rTitle"> 总耗电量(kWh)</span><br/><br/>
                    <span class="tNum" style="color: #FC865D">{{this.totalhaodian}}</span>
                  </div>

                </div>
                <div class="tableOne">
                  <el-table
                    :data="queryTimeDatas"
                    border
                    stripe border fit highlight-current-row
                    style="width: 100%;height:34.6vw; "
                    :header-cell-style="{background:'#F0F2F7',height: '20px',padding:'5px 0px'}"
                    height="34.6vw"
                  >
                    <el-table-column
                      v-for="(column, index) in colT2"
                      :prop="column.prop"
                      :label="column.label"
                      :key="index"
                      :width="column.width"
                      :sortable="column.sortable"
                    >
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>

      </div>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  import { Navbar, Sidebar, AppMain } from '../layout/components'
  import shichang from '@/assets/controlStation/zongshichang.png'
  import zongchanliang from '@/assets/controlStation/zongchanliang.png'
  import zongqiliang from '@/assets/controlStation/zongqiliang.png'
  import haodianliang from '@/assets/controlStation/haodianliang.png'
  export default {
    components: {
      Navbar,
      Sidebar,
      AppMain
    },
    name: 'ComprehensiveMore',
    data() {
      return {
        shichang,
        zongchanliang,
        zongqiliang,
        haodianliang,
        // 所有数据
        queryDatas: [],
        submitAll: {
          access_token: localStorage.getItem('access_token'),
          type: 'console_get_equip_run_statis',
          datas: []
        },
        totalTime: '',
        totalchan: '',
        totalQIz: '',
        totalhaodian: '',
        // 总时长信息
        queryTimeDatas: [],
        queryYieldDatas: [],
        queryLiftingDatas: [],
        queryPowerconsumDatas: [],
        submitTimeAll: {
          access_token: localStorage.getItem('access_token'),
          type: 'console_get_equip_integrated_infomation',
          data: {
            page: {
              page_size: '',
              page_number: ''
            }
          }
        },
        cols: [ // 总运行时长(h)
          { prop: 'equip_cid', label: '出厂编号', width: '150px', sortable: true },
          { prop: 'sop_time', label: '投产时间', width: '130px', sortable: true },
          { prop: 'total_time', label: '累计运行时长(h)', sortable: true }
        ],
        colT: [ // 总产量(T)
          { prop: 'equip_cid', label: '出厂编号', width: '150px', sortable: true },
          { prop: 'sop_time', label: '投产时间', width: '130px', sortable: true },
          { prop: 'total_output', label: '累计产量(T)', sortable: true }
        ],
        colT1: [ // 总起重量(T)
          { prop: 'equip_cid', label: '出厂编号', width: '150px', sortable: true },
          { prop: 'sop_time', label: '投产时间', width: '130px', sortable: true },
          { prop: 'total_lifting', label: '累计起重量(T)', sortable: true }
        ],
        colT2: [ // 累计耗电量(kWh)
          { prop: 'equip_cid', label: '出厂编号', width: '150px', sortable: true },
          { prop: 'sop_time', label: '投产时间', width: '130px', sortable: true },
          { prop: 'total_power', label: '累计耗电量(kWh)', sortable: true }
        ]
      }
    },
    mounted() {
      this.engineData()
      this.queryAllTime()
      /*
      this.queryAllYield()
      this.queryLiftingYield()
      this.queryPower_consumYield()
      */
    },
    methods: {
      // 获取总览数据
      engineData() {
        axios.post('/console', this.submitAll, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          console.log(res)
          this.queryDatas = res.data.datas
          this.totalTime = this.queryDatas[0].value
          this.totalchan = this.queryDatas[1].value
          this.totalQIz = this.queryDatas[2].value
          this.totalhaodian = this.queryDatas[3].value
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 总运行时长列表
      queryAllTime() {
        axios.post('/console', this.submitTimeAll, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.queryTimeDatas = res.data.data.items
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 总产量
      queryAllYield() {
        this.submitTimeAll.data.condition.value_type = 'yield'
        axios.post('/console', this.submitTimeAll, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.queryYieldDatas = res.data.data.items
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 总起重
      queryLiftingYield() {
        this.submitTimeAll.data.condition.value_type = 'lifting'
        axios.post('/console', this.submitTimeAll, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.queryLiftingDatas = res.data.data.items
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 总起重
      queryPower_consumYield() {
        this.submitTimeAll.data.condition.value_type = 'power_consum'
        axios.post('/console', this.submitTimeAll, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.queryPowerconsumDatas = res.data.data.items
        })
          .catch(function(error) {
            console.log(error)
          })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.ComprehensiveMore{
  .homeNav{
    width: 100%;
    height: 50px;
    background-color: #25B6C7;
  }
  .moreContent{
    width: 98%;
    height: 45vw;
    margin: 20px 20px;
    .Cheader{
      width: 100%;
      height: 38px;
      border-bottom: 1px solid #E6E6E6;
      .title{
        border-left: 5px solid #25B6C7;
      }
    }
    .moreList{
      margin-top: 20px;
      .TotalRunningTime{
        .timeTop{
          width: 90%;
          height: 140px;
          margin-left: 40px;
          /*line-height: 140px;*/
          .timeTopLeft{
            width: 20%;
            height: 80px;
            float: left;
            margin-top: 40px;

          }
          .timeTopRight{
            width: 40%;
            height: 80px;
            float: right;
            margin-right: 40px;
            margin-top: 40px;
            text-align: right;
            .rTitle{
              font-size:20px;
              font-family:MicrosoftYaHei-Bold;
              font-weight:bold;
              color:rgba(50,56,66,1);
            }
            .tNum{
              font-size:32px;
              font-family:MicrosoftYaHei-Bold;
              font-weight:bold;
              color:rgba(37,183,200,1);
            }

          }

        }
        .tableOne{
          width: 100%;
          height: 28vw;
          /deep/ .gutter{
            background-color: #D8DEE8;
          }
        }
      }
      .el-row {
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0;
        }
      }
      .el-col {
        border-radius: 4px;
      }
      .bg-purple-dark {
        background: #fff;

      }
      .bg-purple {
        background: #fff;
      }
      .bg-purple-light {
        background: #fff;
      }
      .grid-content {
        height: 42vw;
        border: 1px solid #E6E6E6;
      }
      .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
      }

    }
  }
}
</style>
